<template>
  <el-dialog
      v-model="visible"
      title="修改消费记录"
      width="500px"
      @close="handleClose"
  >
    <el-form
        ref="formRef"
        :model="form"
        :rules="rules"
        label-width="80px"
    >
      <el-form-item label="消费类型">
        <el-input v-model="categoryName" disabled />
      </el-form-item>

      <el-form-item label="日期" prop="date">
        <el-date-picker
            v-model="form.date"
            type="datetime"
            placeholder="请选择日期"
            value-format="YYYY-MM-DD HH:mm:ss"
            style="width: 100%"
        />
      </el-form-item>

      <el-form-item label="金额" prop="amount">
        <el-input-number
            v-model="form.amount"
            placeholder="请输入金额"
            :min="0"
            :precision="2"
            style="width: 100%"
        />
      </el-form-item>

      <el-form-item label="支付方式" prop="paymentMethod">
        <el-select
            v-model="form.paymentMethod"
            placeholder="请选择支付方式"
            style="width: 100%"
        >
          <el-option label="微信" :value=0 />
          <el-option label="支付宝" :value=1 />
          <el-option label="储蓄卡" :value=2 />
          <el-option label="信用卡" :value=3 />
          <el-option label="其他" :value=4 />
        </el-select>
      </el-form-item>

      <el-form-item label="是否必要" prop="isNecessary">
        <el-select
            v-model="form.isNecessary"
            placeholder="请选择"
            style="width: 100%"
        >
          <el-option label="非必要" :value=0 />
          <el-option label="必要" :value=1 />
        </el-select>
      </el-form-item>

      <el-form-item label="是否统计" prop="isStatistics">
        <el-select
            v-model="form.isStatistics"
            placeholder="请选择"
            style="width: 100%"
        >
          <el-option label="不统计" :value=0 />
          <el-option label="统计" :value=1 />
        </el-select>
      </el-form-item>

      <el-form-item label="描述" prop="description">
        <el-input
            v-model="form.description"
            type="textarea"
            placeholder="请输入描述"
            :rows="3"
        />
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, defineProps, defineEmits, watch } from 'vue'
import { ElMessage } from 'element-plus'

const props = defineProps({
  modelValue: {
    type: Boolean,
    required: true
  },
  record: {
    type: Object,
    required: true
  },
  category: {
    type: Object,
    required: true
  }
})

const emit = defineEmits(['update:modelValue', 'confirm', 'close'])

const visible = ref(false)
const formRef = ref()
const categoryName = ref('')

const form = reactive({
  id: null,
  typeId: null,
  date: '',
  amount: null,
  paymentMethod: null,
  isNecessary: 1,
  isStatistics: 1,
  description: ''
})

const rules = {
  date: [{ required: true, message: '请选择日期', trigger: 'change' }],
  amount: [{ required: true, message: '请输入金额', trigger: 'blur' }],
  paymentMethod: [{ required: true, message: '请选择支付方式', trigger: 'change' }],
  isNecessary: [{ required: true, message: '请选择是否必要', trigger: 'change' }],
  isStatistics: [{ required: true, message: '请选择是否统计', trigger: 'change' }],
  description: [{ required: true, message: '请输入描述', trigger: 'blur' }]
}

// 监听 modelValue 变化
watch(() => props.modelValue, (newVal) => {
  visible.value = newVal
  if (newVal) {
    // 初始化表单数据
    form.typeId = props.category.id
    categoryName.value = props.category.name

    // 如果有传入记录数据，则回显到表单
    if (props.record) {
      form.id = props.record.id
      form.date = props.record.consumptionDate
      form.amount = props.record.amount
      form.paymentMethod = props.record.paymentMethod
      form.isNecessary = props.record.isNecessary
      form.isStatistics = props.record.isStatistics
      form.description = props.record.description

    }
  }
})

// 监听 visible 变化
watch(visible, (newVal) => {
  emit('update:modelValue', newVal)
  if (!newVal) {
    resetForm()
  }
})

// 重置表单
const resetForm = () => {
  formRef.value?.resetFields()
  form.id = null
  form.typeId = null
  form.date = ''
  form.amount = null
  form.paymentMethod = null
  form.isNecessary = 1
  form.isStatistics = 1
  form.description = ''
}

// 关闭对话框
const handleClose = () => {
  visible.value = false
  emit('close')
}

// 确认添加
const handleConfirm = async () => {
  try {
    await formRef.value.validate()
    emit('confirm', { ...form })
  } catch (error) {
    ElMessage.error('请填写完整信息')
  }
}
</script>

<style scoped>
.dialog-footer {
  text-align: right;
}
</style>
